<template>
  <div>
    <min-bread :bread="bread"></min-bread>
    <min-table
      :minTable="minTable"
      :cols="cols"
      :minForm="minForm"
      :handleBtn="handleBtn"
      :searchList="searchList"
      :pageInfo="pageInfo"
      @min-handle="onHandle"
      @min-operator="onOperator"
      @min-search="onSearch"
      @min-page="handleCurrentPage"
      @min-size="handlePageSize"
    ></min-table>
    <el-dialog title="申请频谱资源" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="申请原因">
          <el-input v-model="form.name" style="width:200px;"></el-input>
        </el-form-item>
        <el-form-item label="选择频段">
          <el-select v-model="form.region" placeholder="请选择需要申请的范围">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {},
      // 分页信息
      pageInfo: {
        show: true,
        currentPage: 0,
        total: 0,
        pageSize: 10
      },
      editForm: {},
      editShow: false,
      radio: null,
      value1: "",
      // 查询栏数组
      searchList: [
        {
          com: "input",
          prop: "categame",
          label: "范围",
          inputType: "text"
        }
      ],
      // 面包屑
      bread: {
        subTitle: "资源申请"
      },
      // 操作栏数组
      handleBtn: [
        {
          label: "申请",
          style: "width:120px;"
        }
      ],
      // 表格
      minTable: {
        loading: false,
        tableData: [
          {
            id: 1,
            disName: "新东方集团",
            industryId: "教育行业",
            remark: false
          },
          {
            id: 3,
            disName: "上海铭悦软件有限公司",
            industryId: "软件行业",
            remark: true
          },
          {
            id: 4,
            disName: "中国电信",
            industryId: "服务行业",
            remark: true
          }
        ]
      },
      // 表头数据
      cols: [
        {
          prop: "disName",
          label: "申请原因"
        },
        {
          prop: "industryId",
          label: "频段范围"
        },
        {
          type: "btn",
          label: "操作",
          width: "300px",
          btnData: [
            {
              type: "text",
              size: "mini",
              iconName: "CP_edit",
              operatTitle: "编辑"
            },
            {
              iconName: "CP_delete",
              style: "color:#FF2C2C;",
              size: "mini",
              type: "text",
              operatTitle: "撤销"
            }
          ]
        }
      ],
      // 查询栏表单
      minForm: {}
    };
  },
  created() {
    // 初始化数据
    this.getInfo();
  },
  methods: {
    // 获取数据
    getInfo() {
      let params = {};
    },
    // 查询
    onSearch() {
      console.log(this.minForm, "formdata");
      this.getInfo();
    },
    // 操作栏操作
    onHandle(i) {
      this.dialogFormVisible = true;
    },
    onOperator(index, row, operatTitle) {
      if (operatTitle === "编辑") {
        this.dialogFormVisible = true;
      } else {
        this.$confirm("确定要撤销吗?", "撤销申请", {
          confirmButtonText: "确定",
          confirmButtonClass: "confirmButtonClass",
          closeOnClickModal: false,
          cancelButtonText: "取消"
        })
          .then(() => {})
          .catch(() => {});
      }
    },
    // 分页事件
    handleCurrentPage(val) {
      console.log(val, "cpage");
    },
    handlePageSize(val) {
      console.log(val, "ppage");
    }
  }
};
</script>
<style scoped>
</style>
